<template>
<el-container class="brand">
    <el-header>
        品牌名称
        <el-input v-model="search_value" placeholder="请输入内容"></el-input>
        <el-button type="primary" class="fr" size="mini">搜索</el-button>
    </el-header>

    <el-main>
        <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'goods_num', order: 'descending'}">
            <el-table-column prop="brand_name" label="品牌名称">
            </el-table-column>
            <el-table-column prop="goods_num" label="商品数量升序" sortable>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间升序" sortable>
            </el-table-column>
            <el-table-column prop="creat_user" label="创建用户">
            </el-table-column>
            <el-table-column prop="creat_user" label="操作用户">
                <template slot-scope="scope">
                    <span @click="mergeBrande(scope.row)">合并品牌</span>
                    <span style="margin-left: 10px" @click="updateName(scope.row)">修改名称</span>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog :title="oper_type=='merge'?'合并品牌':cur_item.brand_name" :visible.sync="visabled" width="320px" top="212px" center>
            <el-form :model="dialogForm" ref="dialogForm" class="demo-ruleForm">
                <el-form-item>
                    <p v-if="oper_type=='merge'">{{cur_item.brand_name}}({{cur_item.goods_num}}件)</p>
                    <p>{{oper_type=='merge'?'合并至':'修改为'}}</p>
                </el-form-item>
                <el-form-item label="" prop="brand_name" :rules="[
            { required: true, message: '请输入品牌名称'}
          ]">
                    <el-input type="text" v-model="dialogForm.brand_name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
      </span>
        </el-dialog>
    </el-main>
</el-container>
</template>

<style lang="scss" scoped>
.brand {
    & /deep/ {
        .el-header {
            padding: 0 30px;
            margin-top: 30px;
            border-bottom: 1px solid #eee;
            .el-input {
                width: 15%;
                margin-left: 50px;
            }
            .el-button--mini {
                padding: 7px 25px;
                border-radius: 8px;
            }
        }
        .el-main {
            padding: 20px 0;
            .el-table td {
                border: none;
            }
            .el-table th.is-leaf,
            .el-table td {
                border-bottom: none;
                text-align: center;
            }
            thead {
                .cell {
                    border-right: 1px solid #c0c4cc;
                    text-align: center;
                    color: #4aadfc;
                    font-size: 16px;
                    span {
                        display: none;
                    }
                }
                .el-table_1_column_5 .cell {
                    border-right: none;
                }
                .cell:not(:last-child) {}
            }
            tbody {
                .el-table_1_column_5 {
                    color: #4aadfc;
                    span {
                        cursor: pointer
                    }
                }
            }
            form{
                text-align: center;
                .el-form-item{
                    width:150px;
                    margin: 0 auto;
                }
            }
        }
    }
}
</style>

<script>
export default {
    data() {
        return {
            search_value: '',
            visabled: false,
            oper_type:'merge',//merge合并,update修改
            cur_item:{},
            tableData: [{
                    brand_name: '兰芝',
                    goods_num: '7378',
                    create_time: '2016/08/08',
                    creat_user: '陈力',
                },
                {
                    brand_name: '兰蔻',
                    goods_num: '43',
                    create_time: '2017/09/06',
                    creat_user: '阿力'
                }
            ],
            dialogForm: {
                brand_name: '',
            }
        }
    },
    methods: {
        mergeBrande(cur_item) {
            this.visabled = true
            this.cur_item=cur_item
            this.oper_type="merge"
            console.log(this.cur_item)
        },
        updateName(cur_item) {
            this.visabled = true
            this.cur_item=cur_item
            this.oper_type="update"
            console.log(this.cur_item)

        },
        submitForm(){

        },
        resetForm() {
            this.$refs['dialogForm'].resetFields()
            this.visabled = false
        }
    }
}
</script>
